<template>
	<view>
		<view class="item">

			<view v-if="listAddress.length">
				<view class="addressList" v-for="(item, index) in listAddress" :key="index">
					<view class="addressLefts">
						<view class="listUser">
							<view>{{ item.name }}</view>
							<view>{{ item.phone }}</view>
							<view class="checks" v-if="item.is_top">默认</view>
						</view>
						<view class="addressText">{{ item.sheng }}{{ item.shi }}{{ item.qu }}{{ item.address }}</view>
					</view>
					<view class="addressCheck">
						<view class="closeIcon" @click="onCloseAdd(item.id)">
							<u-icon name="close" size="18"></u-icon>
						</view>
						<view class="font" @click="toSetAddress(item.id)">编辑</view>
					</view>
				</view>
			</view>
			<view class="noList" v-else>暂无地址</view>
		</view>
		<view class="btm" @click="toSetAddress()">
			<view class="btn">添加新地址</view>
		</view>
		<u-modal :show="modalShow" @cancel="onClose()" :showCancelButton="true" confirmColor="#606266" content='确认要删除地址吗？' @confirm="deleteClick()"></u-modal>
	</view>
</template>

<script>

	import {
		getAll,
		top,
		del
	} from '../../api/apiH5.js';
	export default {
		data() {
			return {
				modalShow:false,
				checked: false,
				delId: [],
				listAddress: [] //地址列表
			};
		},
		onShow() {
			this.onGetAll();
		},
		onLoad() {},
		methods: {
			//关闭弹框
			onClose(e){
				this.modalShow = false
			},
			onCloseAdd(e){
				this.delId=[e]
				this.modalShow = true
			},
			async deleteClick(){
				try {
					const res = await del({ id: this.delId });
					uni.showToast({
						title: `删除成功`,
						icon: 'none'
					});
					this.modalShow = false
					setTimeout(()=>{
						this.onGetAll();
					}, 2000)
				} catch (e) {
					uni.showToast({
						title: `删除失败`,
						icon: 'none'
					});
				}
			},
			handleChange(e) {
				console.log(e);
			},
			//获取地址列表
			async onGetAll() {
				try {
					const res = await getAll();
					this.listAddress = res.data.data;
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading();
				}
			},
			toSetAddress(e) {
				console.log(e);
				if (e) {
					uni.navigateTo({
						url: './setAddress?id=' + e
					});
				} else {
					uni.navigateTo({
						url: './setAddress'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-modal__content__text{
		text-align: center;
	}
	uni-page-body {
		background-color: #ececec;
	}

	.noList {
		text-align: center;
		margin-top: 40px;
		color: #666666;
	}

	.item {
		padding: 6px 8px;

		.addressList {
			background: #fff;
			padding: 20px;
			margin-bottom: 6px;
			border-radius: 10px;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.listUser {
				margin-bottom: 10px;
				font-size: 15px;
				display: flex;
				align-items: center;

				.checks {
					padding: 5rpx 15rpx;
					margin-left: 10px;
					color: #000;
					font-size: 11px;
					border-radius: 4px;
					border: 1px solid #000;
				}
			}

			.addressText {
				font-size: 13px;
				color: #666666;
				width: 400rpx;
			}

			.addressCheck {
				position: relative;

				.closeIcon {
					margin-bottom: 10px;
					position: absolute;
					right: 0px;
					top: -30px;
				}

				.font {
					font-size: 12px;
					color: #000;
					border-radius: 50px;
					border: 1px solid #000;
					padding: 5px 10px;
				}
			}
		}
	}

	.btm {
		width: 100%;
		position: fixed;
		bottom: 0;
		margin: auto;

		.btn {
			width: 90%;
			margin: 0 auto 10px;
			background: #000;
			border-radius: 20px;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			padding: 10px 0;
		}
	}
</style>
